<template>
    <div>
        <div id="box">
            <p v-for="(n,i) in dog.littletype" @touchstart="find" ref="bbi">
                <span :class="{'linehigh':b==n}">{{n}}</span>
            </p>
           
        </div>
    </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex';
export default {
    data:function(){
        return{
            b:"狗粮"
        }
    },
     computed: {
        ...mapState([
            "dog"
        ])
    },
    activated:function(){
         var param={
                 class:this.b
             }
              this.$store.dispatch("requestdoglist",param);
                this.$store.dispatch("bbb",this.b);
    },
    mounted:function(){
         var param={
                 class:this.b
             }
              this.$store.dispatch("requestdoglist",param);
                this.$store.dispatch("bbb",this.b);
        
    },
    methods:{
        find:function(e){
             this.b = e.target.textContent
             var param={
                 class:this.b
             }
              this.$store.dispatch("requestdoglist",param);

            //  this.http.post("api/doglist",param)
            //  .then(res=>{
            //      console.log(res.data.data)
            //  })

        }
    }
   
}
</script>

<style scoped>
#box{
    width: 31vw;
    height: 86vh;
    border:solid 1px #dbdbdb;
    text-align: center;
}
p{
    cursor: pointer;
    margin: 0;
    margin-top: 5vh;
    font-size: 14px;
}
.linehigh{
    color: red;
}
</style>